<template>
  <div class="app-container">
    <h1>TableInfo</h1>
    <el-collapse v-model="activeName" accordion>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>上传sql</span>
        </div>
        <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          :http-request="uploadHandler"
          :auto-upload="true"
          :accept="acceptList"
          @error="uploadError"
          :on-remove="handlerRemove"
          >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            <el-button type="primary" @click="doGenerate">生成</el-button>
            <el-button type="primary" @click="doParse">解析</el-button>
          </div>
        </el-upload>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>数据库解析结果</span>
        </div>
        <el-collapse-item title="公共参数" name="1">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>公共参数</span>
              <el-button style="float: right;" type="primary" @click="addProperty" size="mini">添加</el-button>
            </div>
            <el-table
              style="width: 100%"
              :data="commonProperties"
            >
              <el-table-column type="index" label="序号" width="100" />
              <el-table-column prop="columnName" label="属性名" width="150">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.columnName" autocomplete="off" size="small"
                            placeholder="属性名" @change="changeJavaType(scope.$index,scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="dataType" label="数据库类型" width="150">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.dataType" autocomplete="off" size="small"
                            placeholder="请输入数据库类型"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="fieldType" label="java类型" width="150">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.fieldType" autocomplete="off" size="small"
                            placeholder="请输入java类型"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="fieldNme" label="字段名" width="150">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.fieldName" autocomplete="off" size="small"
                            placeholder="请输入字段名"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="defaultValue" label="默认值" width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.defaultValue" autocomplete="off" size="small"
                            placeholder="请输入默认值"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="180">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" plain @click="delProperty(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-collapse-item>
        <el-collapse-item title="表结构" name="2">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>表结构</span>
              <el-button style="float: right;" type="primary" @click="addTable" size="mini">添加</el-button>
            </div>
          </el-card>
        </el-collapse-item>
      </el-card>

    </el-collapse>
  </div>
</template>
<script>
export default{
 data(){
    return {
      activeName:'0',
      tableInfo: [],
      commonProperties:[],
      uploadUrl:'',
      acceptList:'.sql',
      file:'',
      fileName:''
    }
  },
  methods: {
    addProperty(){
      console.log('公共属性');
      let property = this.commonProperties
      console.log(property);
      let length = property.length
      this.commonProperties.push(
        {
          index:parseInt(length),
          columnName:'',
          dataType:'',
          fieldType:'',
          fieldName:'',
          defaultValue:''
        })
    },
    addTable(){

    },
    changeJavaType(index,row){
      let that = this
      let property = that.commonProperties;
      for (let i = 0; i < property.length; i++) {
        if (row.index == property[i].index) {
          let item = property[i]
          item.fieldName = this.toCamelCase(item.columnName)
        }
      }
    },
    delProperty(index, row) {
      let that = this;
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //点击确定的操作(调用接口)
        let property = that.commonProperties;
        for (let i = 0; i < property.length; i++) {
          if (row.index == property[i].index) {
            that.commonProperties.splice(i, 1);
            // this.$message({ message: '删除成功', duration: 2000, type: 'success' });
          }
        }
      }).catch(() => {
        //点取消的提示
        return;
      });
    },
    toCamelCase(name) {
      return name.replace(/\_(\w)/g, function(all, letter){
          return letter.toUpperCase();
        }
      );
    },
    doGenerate(){
      this.checkFileExt()
    },
    doParse(){
      this.checkFileExt()
    },
    uploadHandler(params){
      this.file = new FormData(params.file.file);
      this.filename = params.file.name
      this.checkFileExt()
    },
    uploadError(event,file,fileList){
      console.log(event,file,fileList)
    },
    handlerRemove(file,fileList){
      this.file = null
    },
    checkFileExt(){
      if(this.file == null || this.file == ''){
        this.$message.error('请先上传文件')
        return
      }
      if(this.filename == '' || this.filename == null){
        this.$message.error('请上传.sql文件')
        return
      }
      if(!this.filename.endsWith('.sql')){
        this.$message.error('请上传.sql文件')
        return
      }
    }
  }
}
</script>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    margin-bottom: 10px;
  }
  .upload-demo,
  .el-upload,
  .el-upload__text,
  .el-upload-dragger{
    width: 100%;
  }
</style>
